<template>
	<s-layout id="layout" :title="'充值'" :navbar="normal" :leftIconColor="'#ffffff'" :autoBack="false" :leftIcon="leftIcon" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
		<view id="app" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/user_user_background.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px',height:(516 - safeAreaInsets?.top - 44) + 'px'}">
			<view class="area">
				<!-- 资产盒子 -->
				<view class="money_box">
					<view class="money">{{ userInfo.money }}</view>
					<view class="total_assets">总资产（元）</view>
					<view class="two_box">
						<view  class="two_box_item">
							<view class="money_num">{{ total_income }}</view>
							<view class="money_text">累计收益</view>
						</view>
						<view class="two_box_item">
							<view class="money_num">{{ total_withdraw }}</view>
							<view class="money_text">累计提现</view>
						</view>
					</view>
				</view>

				<!-- 充值金额 -->
				<view class="Income_list">
                    <view class="Income_detail">充值金额</view>
                    <view class="shortcut_item" :class="checked_num == item.sum ? 'selected_for' : 'unselected'" @tap="selectSum(item)" v-for="(item,index) of shortcut_sum" :key="index">
                        <view class="shortcut_sum">充 {{ item.sum }} 元</view>
                    </view>
                    <view class="Income_detail">充值金额</view>
					<fui-input v-model="input_num" @focus="focus" type="digit" :inputBorder="true" placeholder="请输入充值数量" maxlength="11" :padding="['15rpx','15rpx','15rpx','15rpx']"></fui-input>
				</view>
			</view>
		</view>

        <!-- 底部按钮  `充值 (${checked}元)` -->
        <view>
            <s-button @netWork="rechargeable" :text="`${checked_switch ? `充值 (${checked_num}元)` : '充值'}`"></s-button>
        </view>
	</s-layout>
</template>

<script setup>
    import { baseUrl } from '@/sheep/config';
    import sheep from '@/sheep';
    import { ref, reactive, unref } from 'vue';
    import { realName, identityCard, sex } from '@/sheep/validate/form';
    import { onLoad } from '@dcloudio/uni-app';
    const { safeAreaInsets } = uni.getSystemInfoSync()
	const userInfo = sheep.$store('user').userInfo;
    onLoad((options) => {
		user_money_logIndexList()
		// console.log(userInfo);
    })

    const shortcut_sum = ref([
        { sum:100 },
        { sum:200 },
        { sum:500 },
        { sum:1000 },
    ])

    const checked_num = ref(100)
    const input_num = ref(null)
    const checked_switch = ref(true)
    // 点击切换金额
    const selectSum = (item) => {
        input_num.value = null
        checked_num.value = item.sum
        checked_switch.value = true
    }

	// 封装我的钱包接口
	const wallet_list = ref([])
	const page = ref(1)
	const current_page = ref()
	const last_page = ref()
	const total = ref()
	const total_income = ref()
	const total_withdraw = ref()
	const user_money_logIndexList = async () => {
		let params = {
			page:page.value
		}
		const res = await sheep.$api.wallet.user_money_logIndexAPI(params)
		wallet_list.value = [...wallet_list.value,...res?.data.rows]
		current_page.value = res.data.current_page
		last_page.value = res.data.last_page
		total.value = res.data.total
		total_income.value = res.data.total_income
		total_withdraw.value = res.data.total_withdraw
	}

    // 聚焦
    const focus = () => {
        checked_num.value = ''
        checked_switch.value = false
    }

    // 充值按钮
    const rechargeable = () => {
    }

</script>

<style lang="scss">
    :deep(.u-input.data-v-5904192e) {
        border: 1px solid #EEEEEE;
    }

	#app {
		background-size: contain; /* 或 cover */
		background-repeat :no-repeat;
	}

	// 版心
	.area {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}

	// 资产部分
	.money_box {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 34rpx 0 40rpx 40rpx;
        margin-bottom: 20rpx;
        margin-top: 30rpx;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		.money {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: 74rpx;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 14rpx;
		}
		.total_assets {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-base;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 40rpx;
		}
		.two_box {
			display: flex;
			align-items: center;
			.two_box_item {
				flex-grow: 1;
				.money_num {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: $uni-font-weight;
					font-size: 40rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
					margin-bottom: 10rpx;
				}
				.money_text {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: 500;
					font-size: $uni-font-size-base;
					font-style: normal;
					text-decoration: none;
					text-align: left;
				}
			}
		}
	}

	// 充值金额
	.Income_list {
		border-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		padding: 30rpx 20rpx 40rpx 20rpx;
		.Income_detail {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-big;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-left: 10rpx;
			padding-bottom: 32rpx;
		}
        // 快捷方式每一项
        .shortcut_item {
            width: calc(50% - 18rpx);
            display: inline-block;
            height: 162rpx;
            border-radius: 8px;
            margin-left: 18rpx;
            margin-bottom: 26rpx;
            .shortcut_sum {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 40rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 162rpx;
            }
        }
	}

    // 将所有偶数类 左外边距清空
    .shortcut_item:nth-of-type(even) {
        margin-left: 0;
    }
    
    // 未选中
    .unselected {
        background-color: #FFFFFF;
        border: 2px solid #EEEEEE;
    }

    // 选中
    .selected_for {
        background-color: #F4F7FF;
        border: 2px solid $uni-color-primary;
    }

</style>